<template>
<div>
  <strong style="font-size: 20px;" ></strong>
  <div style="text-align: center"><strong style="font-size: 20px;margin: auto" >我的订单</strong></div>
<br>
  <el-table
      ref="multipleTable"
      :data="tableData.filter(data => !search1 || data.orderId === +search1)"
      tooltip-effect="dark"
      style="width: 100%;"
      stripe>
    <el-table-column
        prop="orderId"
        label="订单编号"
        width="120">
    </el-table-column>

    <el-table-column
        prop="orderMoney"
        label="金额">
      <template slot-scope="scope">
        ¥{{scope.row.orderMoney}}
      </template>
    </el-table-column>

    <el-table-column
        prop="orderDate"
        sortable
        label="下单日期">
    </el-table-column>

    <el-table-column
        prop="orderState"
        label="订单状态"
        :filters="[{ text: '未支付', value: 0 }, { text: '已支付', value: 1 }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag size="small" v-if="scope.row.orderState === 1" type="success">已支付</el-tag>
        <el-tag size="small" v-else-if="scope.row.orderState === 0" type="danger">未支付</el-tag>
      </template>
    </el-table-column>

    <!--订单对应的游戏-->
    <el-table-column type="expand" label="游戏" width="100">
      <template slot-scope="props">
        <el-table
            empty-text="没有信息"
            :data="props.row.orderItemList"
            style="width: 100%">

          <template slot="empty">
            <el-empty description="商品全部已经下架了~"></el-empty>
          </template>
          <el-table-column
              label=""
          >
            <template slot-scope="scope">
              <el-image
                  :src="'http://localhost:8080/GameStore/images/'+scope.row.game.gameImg"
                  style="width: 80px;height: 80px;border-radius: 8px;margin-left: 80px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
              label="游戏名称">
            <template slot-scope="scope">
              {{scope.row.game.gameName}}
            </template>
          </el-table-column>

          <el-table-column
              label="游戏类型">
            <template slot-scope="scope">
              {{scope.row.game.gameType}}
            </template>
          </el-table-column>

          <el-table-column
              label="价格"
              width="180">
            <template slot-scope="scope">
              ¥{{scope.row.game.price}}
            </template>
          </el-table-column>
          <el-table-column
              label="销量"
              width="180">
            <template slot-scope="scope">
              {{scope.row.game.saleCount}}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <el-table-column
        align="right">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search1"
            placeholder="输入订单编号搜索">
          <el-button slot="append" icon="el-icon-search" style="float: left"></el-button>
        </el-input>
      </template>
      <template slot-scope="scope">
        <el-button v-if="scope.row.orderState === 0" type="primary" @click="goPay(scope.row)">去支付</el-button>
        <el-popconfirm title="确定删除该订单吗？" @confirm="deleteorder(scope.row.orderId)" style="margin-left: 5px">
          <el-button  slot="reference" >删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

<br>
  <!--    分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[1,5,10,100,200,1000,10000]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      style="float: right">
  </el-pagination>


<!--  支付对话框-->
  <el-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
      :before-close="handleClose">
    <div>
      <div style="text-align: center"><strong style="font-size: 20px;margin: auto" >支付</strong></div>
      <el-table
          show-summary
          :data="ordergames"
          style="width: 100%">

        <el-table-column
            label=""
        >
          <template slot-scope="scope">
            <el-image
                preview
                :src="'http://localhost:8080/GameStore/images/'+scope.row.gameImg"
                style="width: 80px;height: 80px;border-radius: 8px"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column
            label="游戏名称"
            prop="gameName">
        </el-table-column>

        <el-table-column
            prop="gameType"
            label="游戏类型"

            filter-placement="bottom-end">
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格/元"
            width="180"
            column-key="price"
        >
          <template slot-scope="scope">
            ¥{{scope.row.price}}
          </template>
        </el-table-column>
        <el-table-column type="expand" style="width:20px">
          <template slot-scope="props">

            <el-row :gutter="20">
              <el-col :span="8">
                <div>
                  <el-statistic group-separator="," :precision="2"  title="评分">

                  </el-statistic>
                  <el-rate
                      style="text-align: center"
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                  </el-rate>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-statistic  title="销量">
                    <template slot="formatter">
                      {{props.row.saleCount}}
                    </template>

                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-statistic  title="年满16周岁">
                    <template slot="formatter">
                      16+
                    </template>

                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>


            <el-row :gutter="20">
              <el-col :span="15">
                <div>
                  <div style="text-align: center"><strong style="font-size: 15px;text-align: center" >详情图片</strong></div>
                  <br>
                  <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                    <el-carousel height="300px" width="300px" >
                      <el-carousel-item v-for="item in props.row.detailGameImg" :key="item">
                        <el-image
                            preview
                            :src="'http://localhost:8080/GameStore/images/'+item"
                            style="width: 500px;height: 300px;border-radius: 8px"
                        ></el-image>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div ><strong style="font-size: 15px" >游戏介绍</strong></div>
                  <br>
                  <div style="text-align:left;margin-right: 50px">{{props.row.description}}</div>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </template>
        </el-table-column>
        <el-table-column
            label=""
            style="width: 2px">
          详情
        </el-table-column>

      </el-table>

      <div style="text-align: center">
        <strong style="font-size: 20px;" ><br></strong>
        <strong style="font-size: 20px;" >选择支付方式</strong>
        <strong style="font-size: 20px;" ><br></strong>
        <strong style="font-size: 20px;" ><br></strong>
        <el-radio-group v-model="radio1" fill="#EBEEF5">
          <el-radio-button label="北京"  >
            <el-image
                style="margin:fill;width: 80px; height: 60px"
                :src="require('@/assets/支付平台-支付宝.png')">
              <!--                  style="width: 80px; height: 80px"-->
            </el-image>
          </el-radio-button>
        </el-radio-group>
        <br><br><br>
        <el-button type="primary" @click="pay">支付</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>

    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  name: "myOrder",
  data(){
    return{
      value:3.7,
      i:0,
      userId: +sessionStorage.getItem('userId'),
      1:0,
      orderId: 0,
      radio1:-1,
      dialogVisible:false,
      total: 0,
      size: 100,
      current: 1,
      search:'',
      search1:'',
      order:{
        orderId:''
      },
      gameList:{
        userId:this.$store.state.userId,
        gameList:[]
      },
      ordergames: [
      ],
      tableData: [
      ],
    }
  },
created() {
    this.getMyOrder()
},
  methods:{
    deleteorder(orderId){
      this.$axios.post('/order/delete' ,{orderId:orderId} )
          .then(res => {
            if(res.data.status === 200) {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success',
              });
              this.getMyOrder();
            }
          })
    },
    goPay(row){
      for(this.i=0;this.i<row.orderItemList.length;this.i++){
       this.ordergames.push(row.orderItemList[this.i].game)
      }
      this.dialogVisible=true
      this.orderId=row.orderId
    },
    pay(){
      if(this.radio1 === -1){
          this.$message({
            showClose: true,
            message: '请选择支付方式',
            type: 'error',
          });
          return false
      }
      this.$axios.post('/pay' ,{orderId:this.orderId} )
          .then(res => {
            if(res.data.status === 200) {
              document.querySelector('body').innerHTML = res.data.pageContent;
              document.forms[0].submit();
              this.getMyOrder()
              this.dialogVisible=false
            }
          })
    },
    handleClose() {
      this.resetForm();
      this.ordergames=[]
    },
    resetForm(formName) {
      this.game=[{}]
      this.dialogVisible = false
    },
    getMyOrder(){
      this.$axios.get('/user/order/'+this.userId,{
        params:{
          size:this.size,
          current:this.current
        }
      }).then(res => {
        this.tableData = res.data.orderList
        this.total= res.data.total
        this.current= res.data.current
      })
    },
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
    this.size=val;
    this.getMyOrder()
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.current=val;
    this.getMyOrder()
  },
    deletehandle(orderId){
      this.order.orderId=orderId
      this.$axios.post('/order/delete',this.order).then(res => {
        if(res.data.status === 200) {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
          });
        }
      })
    },
    confirmOrder(){

    },
  filterTag(value, row) {
    return row.orderState === value;
  },
}
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>